<template>
	<view class="page">
		
		<goodsList :list='gussLikeBook'></goodsList>

	</view>
</template>

<script>
	import goodsList from "../../component/goodsList.vue"
	export default {
		components:{
			goodsList
		},
		data() {
			return {
				flag:false,
				animationData: {},
				typeList: [{
					hot: true,
					name: '先婚后爱',
					type: 'pink'
				}, {
					hot: true,
					name: '代价',
					type: 'pink'
				}, {
					hot: false,
					name: '先婚后爱',
					type: 'pink'
				}, {
					hot: false,
					name: '宫斗宅斗',
					type: 'green'
				}, {
					hot: true,
					name: '虐渣',
					type: 'blue'
				}, {
					hot: false,
					name: '女选',
					type: 'green'
				}, {
					hot: true,
					name: '中天',
					type: 'pink'
				}, {
					hot: false,
					name: '豪门恩怨',
					type: 'pink'
				},{
					hot: true,
					name: '先婚后爱',
					type: 'pink'
				}, {
					hot: true,
					name: '代价',
					type: 'pink'
				}, {
					hot: false,
					name: '先婚后爱',
					type: 'pink'
				}, {
					hot: false,
					name: '宫斗宅斗',
					type: 'green'
				}, {
					hot: true,
					name: '虐渣',
					type: 'blue'
				}, {
					hot: false,
					name: '女选',
					type: 'green'
				}, {
					hot: true,
					name: '中天',
					type: 'pink'
				}, {
					hot: false,
					name: '豪门恩怨',
					type: 'pink'
				}],
				gussLikeBook:[{
					src:'',
					title:'你是我的言不由衷',
					decs:'水电费hi水电费GIS瑞尔通过比赛的烦恼表面上的房间号事故发生的反馈说对方告诉科技对方',
					author:'菜馍馍',
					textNum:"768万字",
					status:'未售罄',
					type:'水果'
				},{
					src:'',
					title:'你是我的言不由衷',
					decs:'水电费hi水电费GIS瑞尔通过比赛的烦恼表面上的房间号事故发生的反馈说对方告诉科技对方',
					author:'菜馍馍',
					textNum:"768万字",
					status:'未售罄',
					type:'水果'
				},{
					src:'',
					title:'你是我的言不由衷',
					decs:'水电费hi水电费GIS瑞尔通过比赛的烦恼表面上的房间号事故发生的反馈说对方告诉科技对方',
					author:'菜馍馍',
					textNum:"768万字",
					status:'未售罄',
					type:'水果'
				},{
					src:'',
					title:'你是我的言不由衷',
					decs:'水电费hi水电费GIS瑞尔通过比赛的烦恼表面上的房间号事故发生的反馈说对方告诉科技对方',
					author:'菜馍馍',
					textNum:"768万字",
					status:'未售罄',
					type:'水果'
				},{
					src:'',
					title:'你是我的言不由衷',
					decs:'水电费hi水电费GIS瑞尔通过比赛的烦恼表面上的房间号事故发生的反馈说对方告诉科技对方',
					author:'菜馍馍',
					textNum:"768万字",
					status:'未售罄',
					type:'水果'
				},{
					src:'',
					title:'你是我的言不由衷',
					decs:'水电费hi水电费GIS瑞尔通过比赛的烦恼表面上的房间号事故发生的反馈说对方告诉科技对方',
					author:'菜馍馍',
					textNum:"768万字",
					status:'未售罄',
					type:'水果'
				}]
				// desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
			}
		},
		computed: {
			
			
		},
		onLoad(options) {
			console.log(options)
			uni.setNavigationBarTitle({
				title:options.title
			})
		},
		onShow() {
			let animation=uni.createAnimation({
				duration: 1000,
				timingFunction: 'ease',
			})
			this.animation=animation
		},
		methods: {
			openMore(){
				
				this.animation.height(150).step()
				this.animationData = this.animation.export()
				this.flag=true
			},
			closeMore(){
				
				this.animation.height(70).step()
				this.animationData = this.animation.export()
				this.flag=false
			}
		}
	}
</script>



<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding: 20rpx;

		.topTitle {
			width: 100%;
			height: 130rpx;
			position: fixed;
			top: 0;
			background-color: #fff;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 150rpx;
		}

		.distirct {
			width: 100%;
			height: 130rpx;
			margin-top: 130rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			align-content: flex-start;
			position: relative;
			overflow: hidden;
			.types {
				width: 150rpx;
				height: 46rpx;
				text-align: center;
				background-color: rgba($color: #ccc, $alpha: 0.6);
				border-radius: 10rpx;
				line-height: 46rpx;
				margin-bottom: 20rpx;
			}
			.open{
				position: absolute;
				bottom: -10rpx;
				z-index: 99;
				left: 50%;
				transform: translateX(-50%);
			}
		}
		
	}
</style>
